<template>
    <el-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" router theme="dark" v-bind="$attrs">
        <template v-for="(menu1) in menus" :key="menu1.path + menu1.name">
            <template v-if="menu1.type === 'menu-item'">
                <el-menu-item :index="menu1.path" :route="menu1.path">
                    <router-link :to="menu1.path">{{menu1.name}}</router-link>
                </el-menu-item>
            </template>
            <template v-else>
                <el-submenu :index="menu1.path">
                    <template #title>
                        <span>{{menu1.name}}</span>
                    </template>
                    <template v-for="(menu2) in menu1.children" :key="menu2.path + menu2.name">
                        <template v-if="menu2.type === 'menu-item'">
                            <el-menu-item :index="menu2.path" :route="menu2.path">
                                <router-link :to="menu2.path">{{menu2.name}}</router-link>
                            </el-menu-item>
                        </template>
                        <template v-else>
                            <el-submenu :index="menu2.path">
                                <template #title>
                                    <span>{{menu2.name}}</span>
                                </template>
                                <template v-for="(menu3) in menu2.children" :key="menu3.path + menu3.name">
                                    <template>
                                        <el-menu-item :index="menu3.path" :route="menu3.path">
                                            <router-link :to="menu3.path">{{menu3.name}}</router-link>
                                        </el-menu-item>
                                    </template>
                                </template>
                            </el-submenu>
                        </template>
                    </template>
                </el-submenu>
            </template>
        </template>
    </el-menu>
</template>

<script lang="ts">
import router from '@/router';
import { defineComponent, reactive, toRefs, VNodeChild } from 'vue'

interface MenuInfo {
    key: string;
    keyPath: string[];
    item: VNodeChild;
    domEvent: MouseEvent;
}

export default defineComponent({
    name: 'NavMenu',
    props: {
        menus: {
            type: Array,
            default: () => []
        }
    },
    setup() {
        const state = reactive({
            rootSubmenuKeys: ['test'],
            openKeys: ['test'],
            selectedKeys: [''],
        });
        return {
            ...toRefs(state),
            // selectedKeys: ref<string[]>(['1']),
            clickMenu: (e: MenuInfo) => {
                console.log(e)
                router.push({ path: e.key });
            }
        }
    },
    watch: {
        '$route'(val) {
            this.selectedKeys = [val.fullPath]
            // let currentRoutePath = this.$router.currentRoute;
        }
    }
})
</script>

<style lang="less" scoped>
.el-menu {
    border-right: none !important;
}

:deep(.el-submenu) {
    background-color: #545c64;
    border-bottom: none !important;
    .el-submenu__title {
        color: #ffffff !important;
    }
    .el-submenu__title:hover {
        background-color: rgb(74, 81, 87);
    }
}

:deep(.el-menu-item) {
    background-color: #545c64;
    a {
        color: #ffffff !important;
        text-decoration: none;
        display: inline-block;
        width: 100%;
        padding: 0 20px;
        margin: 0 -20px;
    }
}
:deep(.el-menu-item:hover) {
    background-color: rgb(74, 81, 87);
}
:deep(.el-menu-item.is-active) {
    background-color: rgb(69, 74, 80);
    a {
        text-decoration: none;
    }
}
</style>